<template>
  <div class="left_center_two">
    <Echart id="leftCenterTwo" :options="options" class="left_center_inner" ref="charts"/>
<!--    <div class="pic" v-if="picShow" @click="picShow=false"></div>-->
  </div>

</template>

<script>
export default {
  data() {
    return {
      options: {},
      picShow:false,
      pieData:[
        { value: 43922.40, name: '农用地' ,selected: true ,
          nextData:[
            { value: 10838.27, name: '耕地' },
            { value: 6489.26, name: '园地' },
            { value: 14765.03, name: '林地' },
            { value: 3396.98, name: '草地' },
            { value: 120.88, name: '设施农用地' },
            { value: 8311.99, name: '其他农用地' }
          ]
        },
        { value: 24548.47, name: '建设用地' ,
          nextData:[
            { value: 3282.70, name: '城镇住宅用地' },
            { value: 4682.46, name: '农村宅基地' },
            { value: 1250.63, name: '公共管理与公共服务用地' },
            { value: 1051.56, name: '商业服务业用地' },
            { value: 8530.40, name: '工矿用地' },
            { value: 99.98, name: '仓储用地' },
            { value: 540.08, name: '绿地与开敞空间用地' },
            { value: 1474.42, name: '城镇村道路用地' },
            { value: 3004.68, name: '对外交通用地' },
            { value: 194.78, name: '公用设施用地' },
            { value: 174.77, name: '特殊用地' },
            { value: 261.89, name: '水工建筑用地' },
            { value: 0.12, name: '空闲地' }
          ]},
        { value: 19928.34, name: '水域及未利用地',
          nextData:[
            { value: 19871.54, name: '陆地水域' },
            { value: 56.80, name: '其他未利用地' }
          ]}
      ]
    };
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    getData() {
      let that=this
      this.init()

      this.$nextTick(() => {
        that.mapClick()
      })

    },
    init() {
      let that=this
      this.options = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '一级地类',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
              position: 'inner',
              fontSize: 10,
              color:"#fff"
            },
            colorBy: 'data',
            data: that.pieData
          },
          {
            name: '二级地类',
            type: 'pie',
            radius: ['45%', '60%'],
            labelLine: {
              length: 30
            },
            label: {
              formatter: '{a|{b}}\n{hr|}\n  {c}  {per|{d}%}  ',
              backgroundColor: '#F6F8FC',
              borderColor: '#8C8D8E',
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                a: {
                  color: '#6E7079',
                  lineHeight: 22,
                  align: 'center'
                },
                hr: {
                  borderColor: '#8C8D8E',
                  width: '100%',
                  borderWidth: 1,
                  height: 0
                },
                b: {
                  color: '#4C5058',
                  fontSize: 14,
                  fontWeight: 'bold',
                  lineHeight: 33
                },
                per: {
                  color: '#fff',
                  backgroundColor: '#4C5058',
                  padding: [3, 4],
                  borderRadius: 4
                }
              }
            },
            data: that.pieData[1].nextData
          }
        ]
      };
    },
    mapClick() {
      let that=this
      let chart=this.$refs.charts.chart
      chart.on("click", (params) => {
        console.log(params);
        if (params.seriesIndex===0){
          var option = chart.getOption();
          option.series[1].data = that.pieData[params.dataIndex].nextData;
          chart.setOption(option);
        }else {
          this.picShow=true
        }
        that.updateSource(params.seriesIndex,params.name)
      });
    },
    updateSource(index,name) {
      let that=this
      let cql=""
      if (index===0){
        cql="SDL like '%"+name+"'"
      }else if (index===1){
        cql="LXMC like '%"+name+"'"
      }else {
        return
      }
      let map = that.$store.state.map
      let sourceList=map.getLayers().array_
      let source=sourceList[2].getSource()
      let params={
          LAYERS: 'xf:wjxzydfb2022',
          CQL_FILTER: cql
        }
      source.updateParams(params)
    }
  },
};
</script>
<style lang='scss' scoped>
.left_center_two{
  width: 100%;
  height: 100%;
  position: relative;
  .pic{
    position: absolute;
    top: 0;
    width: 100%;
    height: 98%;
    //padding: 16px 16px 10px 16px;
    background: rgba(0,0,0,.8);
    box-sizing: border-box;
    background-size: cover;
    background-position: center center;
    background-image: url("../../assets/img/datav/cyxz/kjxz.png");
  }
}
</style>
